<!--
 * @Author: 宋杰
 * @Date: 2021-01-08 10:47:51
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-03-17 16:41:22
 * @Description: 一家十一口(猜一字) 中间 中国地图
-->
<template>
  <div class="div1">
    <div class="middle">
      <div class="imm">
        <img src="../../assets/img/redutu.png" />
      </div>
      <div
        class="map-container"
        ref="myEchart"
        style="width:100%;height:100%"
      ></div>
    </div>
  </div>
</template>

<script>
// import echarts from "echarts";
import "../../../node_modules/echarts/map/js/china.js"; // 引入中国地图数据
export default {
  name: "",
  data() {
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.Myecharts();
  },
  //方法集合
  methods: {
    Myecharts() {
      this.myEchart = this.$echarts.init(this.$refs.myEchart);
      var dataValue = this.dealWithData();
      var formatterData = `{c}(人)\n{b}`;
      var option = {
        // 图例组件 可以实现不同省份不同颜色
        legend: {
          show: false,
        },
        // 鼠标提示框组件。
        tooltip: {
          borderWidth: 1, //设置外层边框
          borderColor: "#555555",
          backgroundColor: `rgba(255,255,255,1)`,
          textStyle: {
            color: "#555555",
          },
        },

        // 直角坐标系内绘图网格
        grid: {
          left: "center",
        },

        // 地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
        geo: {
          map: "china", //地图类型。
          roam: false, // 是否开启鼠标缩放和平移漫游
          zoom: 1.2, //当前视角的缩放比例。
          center: [104.4, 35.8], // 当前视角的中心点，用经纬度表示
          // center: [105, 36], // 调整地图位置

          label: {
            // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
            normal: {
              show: false, //省份名展示
              fontSize: "10",
              color: "rgba(0,0,0,0.7)",
            },
            // 对应的鼠标悬浮效果
            emphasis: {
              show: false,
              textStyle: {
                color: "#00a0c9",
              },
            },
          },

          //地图区域的多边形 图形样式。
          itemStyle: {
            // 地图样式
            normal: {
              shadowOffsetY: 14, //上下偏移量
              shadowOffsetX: 0, //左右偏移量
              shadowColor: "#00256e", //阴影
              areaColor: {
                type: "linear-gradient",
                x: 600, //左->右
                y: 20, //下 -> 上
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#00246d", // 0% 处的颜色
                  },
                  {
                    offset: 0.2,
                    color: "#00246d", // 0% 处的颜色
                  },
                  {
                    offset: 0.8,
                    color: "#00a2f7", // 100% 处的颜色
                  },
                ],
                global: true, // 缺省为 false
              },
              borderWidth: 4, //设置外层边框宽度
              borderColor: "#9ffcff", //边框颜色
            },
            // 高亮状态下的多边形和标签样式
            emphasis: {
              areaColor: "#0b45d2",
              borderWidth: 0,
              shadowColor: "#00256e",
            },
          },

          regions: [
            // 在地图中对特定的区域配置样式。
            {
              name: "南海诸岛",
              // value:35,
              itemStyle: {
                // 隐藏地图
                normal: {
                  opacity: 0, // 为 0 时不绘制该图形
                },
              },
              label: {
                show: false, // 隐藏文字
              },
            },
          ],
        },

        // 地图数据
        series: [
          // 地图 相当于是一个背景
          {
            // name: "Top1",
            type: "map",
            map: "china",
            roam: false,
            zoom: 1.2, //当前视角的缩放比例。
            // 关闭地图的鼠标移入提示
            tooltip: {
              show: false,
            },
            geoIndex: 1,
            showLegendSymbol: false, // 存在legend时显示
            // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
            label: {
              normal: {
                show: false, //省份名展示
                fontSize: "10",
                color: "rgba(0,0,0,0.7)",
              },
              // 对应的鼠标悬浮效果
              emphasis: {
                show: true,
                textStyle: {
                  color: "#9ffcff",
                  fontSize:16
                },
              },
            },
            //地图区域的多边形 图形样式。
            itemStyle: {
              // 地图样式
              normal: {
                shadowOffsetY: 0, //上下偏移量
                shadowOffsetX: 0, //左右偏移量
                shadowColor: "#00256e", //阴影
                areaColor: {
                  type: "linear-gradient",
                  x: 600, //左->右
                  y: 20, //下 -> 上
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#00246d", // 0% 处的颜色
                    },
                    {
                      offset: 0.2,
                      color: "#00246d", // 0% 处的颜色
                    },
                    {
                      offset: 0.8,
                      color: "#00a2f7", // 100% 处的颜色
                    },
                  ],
                  global: true, // 缺省为 false
                },
                borderWidth: 1, //设置外层边框宽度
                borderColor: "#6bb8fa", //边框颜色
              },
              // 高亮状态下的多边形和标签样式
              emphasis: {
                areaColor: "#1E90FF",
                borderWidth: 0,
                shadowColor: "#6bb8fa",
              },
            },
            regions: [
              // 在地图中对特定的区域配置样式。
              {
                name: "南海诸岛",
                // value:35,
                itemStyle: {
                  // 隐藏地图
                  normal: {
                    opacity: 0, // 为 0 时不绘制该图形
                  },
                },
                label: {
                  show: false, // 隐藏文字
                },
              },
            ],
          },

          // 散点图
          {
            name: "Top5",
            type: "effectScatter",
            coordinateSystem: "geo", //该系列使用的坐标系 'geo'使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件
            data: dataValue, //系列中的数据内容数组。数组项通常为具体的数据项
            symbolSize: 10, //标记的大小
            // 可以定义 data 的哪个维度被编码成什么
            encode: {
              value: 2,
            },
            showEffectOn: "render", //配置何时显示特效。 render绘制完成后显示特效
            // 涟漪特效相关配置。
            rippleEffect: {
              brushType: "stroke", //波纹的绘制方式
              // color: "#01ddfd", //颜色
              period: 9, //动画的周期，秒数。
              scale: 4, //动画中波纹的最大缩放比例。
            },
            hoverAnimation: true,

            // 浮动提示
            tooltip: {
              show: true,
            },

            // 文字样式
            label: {
              show: false,
              fontSize: 8,
              fontWeight: "normal",
              fontFamily: "sans-serif",
              // position: "left",
              distance: 8,
              color: "#ffffff",
              formatter: formatterData,

              // textStyle: {
              //   color: "#000000",
              //   fontSize: 2,
              // },
            },

            // 图的样式
            itemStyle: {
              color: "#0efacc",
              shadowBlur: 2,
              shadowColor: "#333",
            },
            zlevel: 1, // 层级
          },
        ],
      };
      this.myEchart.setOption(option);
    },
    // 散点图的纬度
    dealWithData() {
      var geoCoordMapS = [
        {
          name: "江苏",
          value: [120.26, 32.54],
          color: "#c4121e",
        },
        {
          name: "浙江",
          value: [120.15, 29.28],
          color: "#5dda8d",
        },
        {
          name: "贵州",
          value: [106.91, 26.67],
          color: "#01ddfd",
        },
        {
          name: "江西",
          value: [115.89, 27.97],
          color: "#f98c01",
        },
      ];
      var geoCoordMap = {
        新疆: [86.61, 40.79],
        西藏: [89.13, 30.66],
        黑龙江: [128.34, 47.05],
        吉林: [126.32, 43.38],
        辽宁: [123.42, 41.29],
        内蒙古: [112.17, 42.81],
        北京: [116.4, 40.4],
        宁夏: [106.27, 36.76],
        山西: [111.95, 37.65],
        河北: [115.21, 38.44],
        天津: [117.04, 39.52],
        青海: [97.07, 35.62],
        甘肃: [103.82, 36.05],
        山东: [118.01, 36.37],
        陕西: [108.94, 34.46],
        河南: [113.46, 34.25],
        安徽: [117.28, 31.86],
        江苏: [120.26, 32.54],
        上海: [121.46, 31.28],
        四川: [103.36, 30.65],
        湖北: [112.29, 30.98],
        浙江: [120.15, 29.28],
        重庆: [107.51, 29.63],
        湖南: [112.08, 27.79],
        江西: [115.89, 27.97],
        贵州: [106.91, 26.67],
        福建: [118.31, 26.07],
        云南: [101.71, 24.84],
        台湾: [121.01, 23.54],
        广西: [108.67, 23.68],
        广东: [113.98, 22.82],
        海南: [110.03, 19.33],
        澳门: [113.54, 22.19],
        香港: [114.17, 22.32],
      };
      var data = [];
      for (var key in geoCoordMapS) {
        console.log("key=====>", key);
        data.push({
          // 名字
          name: geoCoordMapS[key].name,
          // 地理坐标
          value: geoCoordMapS[key].value,
          // 点的颜色
          itemStyle: {
            color: geoCoordMapS[key].color,
          },
          // params: 1111111,
          // label: {
          //   position: "top",
          //   show: true,
          // },
        });
      }
      console.log("data", data);
      return data;
    },
  },
  destroyed() {
    window.onresize = null;
  },
};
</script>
<style lang="scss" scoped>
.div1 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.middle {
  position: relative;
  width: 85%;
  height: 100%;
  margin-left: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  // background: url("../../assets/img/ditu.png") no-repeat;
  // background-size: 100% 100%;
  // position: relative;
  // left: 0.5rem;
}
.imm img {
  height: 5.6rem;
  width: 1.7rem;
  position: absolute;
  top: 0.3rem;
  left: -1.2rem;
}
// .div2 {
//   position: absolute;
//   right: -0.5rem;
//   top: 50%;
//   width: 2.3rem;
//   height: 1.5rem;
//   // background: #040711;
//   // border: 0.05rem solid #ef4040;
//   background: url("../../assets/img/jux.png") no-repeat;
//   background-size: 100% 100%;
//   border-radius: 0.2rem;
//   border-radius: 0.2rem;
//   padding: 0.05rem 0.05rem;
//   display: flex;
//   justify-content: space-between;
//   flex-direction: column;
//   ::before {
//     content: "";
//     position: absolute;
//     top: 23%;
//     right: 2.21rem;
//     width: 0.999rem;
//     height: 1rem;
//     // background: #ef4040;
//     background: url("../../assets/img/jiantou.png") no-repeat;
//     background-size: 100% 100%;
//   }
//   > div {
//     font-family: PingFangSC-Regular;
//     font-size: 0.15rem;
//     color: #ffffff;
//     line-height: 0.225rem;
//   }
// }
</style>
